<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2022-01-25 18:43:23
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-03-18 16:00:14
 * @Description:工单升级
-->
<template>
  <el-form
    ref="form"
    label-position="right"
    label-width="128px"
    size="mini"
    :disabled="disabled"
    :model="formData"
    :rules="rules"
  >
    <el-form-item label="需求标题" prop="title">
      <el-input v-model="formData.title" />
    </el-form-item>
    <el-form-item label="需求描述">
      <el-input v-model="formData.remark" type="textarea" :rows="4" />
    </el-form-item>
    <el-form-item label-width="0px" class="form-item-wrapper">
      <el-row>
        <el-col :span="12">
          <el-form-item label="紧急程度" prop="level">
            <dic-select v-model="formData.level" type="string" dic-key="itemLevel" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提出科室" prop="organizer">
            <department-cascader v-model="formData.organizer" class="w100" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label-width="0px" class="form-item-wrapper">
      <el-row>
        <el-col :span="12">
          <el-form-item label="提出人" prop="sponsor">
            <el-input
              ref="sponsorInput"
              v-model="formData.sponsor"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label-width="0px" class="form-item-wrapper">
      <el-row>
        <el-col :span="12">
          <el-form-item label="提出日期" prop="startTime">
            <el-date-picker
              v-model="formData.startTime"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="datetime"
              align="right"
              :prefix-icon="'null'"
              :clear-icon="'null'"
              class="date-picker"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望完成日期">
            <el-date-picker
              v-model="formData.endTime"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="datetime"
              align="right"
              :prefix-icon="'null'"
              :clear-icon="'null'"
              class="date-picker"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label-width="0px" class="form-item-wrapper">
      <el-form-item label="涉及系统" prop="aboutSystem">
        <dic-multi-select v-model="formData.aboutSystem" dic-key="aboutSystem" class="w-100" />
      </el-form-item>
    </el-form-item>
    <el-form-item label="附件">
      <el-col :span="22">
        <upload v-model="formData.enclosure" />
      </el-col>
    </el-form-item>
  </el-form>
</template>

<script>
import TicketApi from '@/feat/ticket/api';
import DicSelect from '@/feat/system/dictionary/normal/component/dicSelect.vue';
import DicMultiSelect from '@/feat/system/dictionary/normal/component/dicMultiSelect.vue';
export default {
  name: 'EndUpgrade',
  components: {
    DepartmentCascader: () => import('@/feat/system/department/component/departmentCascader.vue'),
    Upload: () => import('@/components/upload'),
    DicSelect,
    DicMultiSelect,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    // 提出人
    sponsor: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      formData: {
        // 需求标题
        title: '',
        // 需求描述
        remark: null,
        // 紧急程度
        level: null,
        // 提出科室
        organizer: null,
        // 提出人
        sponsor: this.sponsor || null,
        // 联系电话
        phone: null,
        // 提出日期
        startTime: null,
        // 期望完成日期
        endTime: null,
        // 涉及系统
        aboutSystem: null,
        // 附件
        enclosure: null,
      },
      rules: {
        title: [{
          required: true, message: '请输入需求标题', trigger: 'blur',
        }],
        level: [{
          required: true, message: '请选择紧急程度', trigger: 'change',
        }],
        organizer: [{
          required: true, message: '请选择提出科室', trigger: 'change',
        }],
        sponsor: [{
          required: true, message: '请选择提出人', trigger: 'blur',
        }],
        phone: [{
          required: true, message: '请输入联系电话', trigger: 'blur',
        }, {
          pattern: /^((0\d{2,3}-?\d{7,8})|(1[3465789]\d{9}))$/, message: '非有效手机或座机号', trigger: 'blur',
        }],
        startTime: [{
          required: true, message: '请选择提出日期', trigger: 'change',
        }],
        aboutSystem: [{
          required: true, message: '请选择涉及系统', trigger: 'change',
        }],
      },
    };
  },
  methods: {
    async onSubmit(ticketId) {
      await this.$refs.form.validate();
      await TicketApi.upgrade({
        ticketId,
        ...this.formData,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-item-wrapper {
  padding: 0;
  margin-bottom: 0;
  .el-col-12 {
    padding:0;
  }
}
.date-picker {
  width: 100%;
  ::v-deep .el-input__inner{
    padding:0 16px;
  }
}
</style>
